<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-block class="block">
					<view class="content">1:1</view>
				</pure-block>
			</pj-demo>

			<!-- 自定义比例 -->
			<pj-demo title="自定义比例">
				<pure-block
					class="block"
					ratio="16:9"
				>
					<view class="content">16:9</view>
				</pure-block>
				<pure-gap></pure-gap>
				<pure-block
					class="block"
					ratio="9:16"
				>
					<view class="content">9:16</view>
				</pure-block>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	// **************************************************************************************************************
	// * Refs
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Computeds
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Watches
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * 生命周期
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Functions
	// **************************************************************************************************************
</script>

<style lang="scss" scoped>
	.page {
		.block {
			width: 180px;
		}

		.content {
			width: 100%;
			height: 100%;
			background: var(--pure-theme-primary);
			color: var(--pure-text-color-invert);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-weight: bold;
		}
	}
</style>
